<template>
  <div ref="chartRef" style="width: 340px; height:  148px; padding: 0;"></div>
</template>

<script setup lang="ts">
  import { onMounted, ref, watch } from 'vue';
  import * as echarts from 'echarts';
  const props = defineProps({
    data: {
      type: Array,
      default: () => [{}]
    },
    typeName: {
      type: Array,
      default: () => []
    },
    colorList: {
      type: Array,
      default: () => []
    },
    legendName: {
      type: String,
      default: ''
    }
  })
  const num = 0
  const chartRef = ref < HTMLDivElement | null > (null);
  const chartInstance = ref < echarts.ECharts | null > (null);
  const chartData = ref < { categories: string[], turnover: number[], profit: number[] } > ({
    categories: [],
    turnover: [],
    profit: []
  });
  const getTotal = () => {
    console.log();

    return props.data.reduce((sum, obj) => sum + obj.value, 0)
  }

  const getChartOption = () => {
    return {
      title: {
        show: true,
        text: getTotal(),
        subtext: '总计',
        x: "23%",
        y: "35%",
        textAlign: "center",
      },
      tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.7)', // 设置提示框背景色为类似图片中的深色半透明
        textStyle: {
          color: '#fff' // 设置文字颜色为白色
        }
      },
      grid: {
        left: '10%',    // 控制图表的左边距
        right: '10%',   // 控制图表的右边距
        top: '10%',     // 控制图表的上边距
        bottom: '10%'   // 控制图表的下边距
      },
      legend: {
        type: "scroll",
        orient: 'vertical',
        height: '100%',
        left: '55%',
        top: 'center',
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 15,
        data: props.data,
        formatter: function (name) {
          for (var i = 0; i < props.typeName.length; i++) {
            if (name == props.data[i].name) {
              return '{name|' + name + '}{num|' + props.data[i].value + ' ' + props.legendName + '}'
            }
          }
        },
        textStyle: {
          rich: {
            name: {
              fontSize: 14,
              fontWeight: 400,
              width: 50,
              height: 10,
              padding: [0, 0, 0, 5],
              color: 'rgba(0, 0, 0, 0.65)',
              fontFamily: 'PingFang SC, PingFang SC;',
            },
            num: {
              fontSize: 14,
              fontWeight: 500,
              height: 50,
              width: 50,
              align: 'right',
              color: 'rgba(0, 0, 0, 0.65)',
              fontFamily: 'DIN, DIN;',
            },

          }
        }

      },
      series: [{
        type: 'pie',
        radius: ['75%', '95%'],
        center: ["25%", "50%"],

        itemStyle: {
          // borderRadius: 4,
          // shadowBlur: 8,
          shadowColor: "rgba(255, 255, 255, 0)",
          borderColor: '#FFF',
          borderWidth: 0,
          color: function (params) {
            return props.colorList[params.dataIndex]
          }
        },
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: props.data
      }]
    }
  };
  const initChart = async () => {
    if (chartRef.value) {
      chartInstance.value = echarts.init(chartRef.value);
      const option = getChartOption();
      chartInstance.value.setOption(option);
    }
  };

  onMounted(() => {

  });
  defineExpose({ initChart })
</script>

<style scoped>
  /* 可以添加样式 */
</style>